<template>
  <div class="register">
    <el-form
      ref="registerForm"
      :model="loginForm"
      class="el-form"
      :rules="rules"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="密码登录" style="margin-top: 20px" name="first">
          <label class="register-label">用户名</label>
          <el-form-item class="marginTop" prop="userName">
            <el-input
              class="input-style"
              v-model="loginForm.userName"
              type="text"
              auto-complete="off"
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <label class="register-label">密码</label>
          <el-form-item class="marginTop" prop="pwd">
            <el-input
              class="input-style"
              v-model="loginForm.pwd"
              type="text"
              auto-complete="off"
              placeholder="请输入密码"
            >
            </el-input>
          </el-form-item>
          <el-checkbox class="register-label">记住密码</el-checkbox>
        </el-tab-pane>
        <!-- 验证码登录-->
        <el-tab-pane label="验证码登录" name="second">
          <label class="register-label">手机号</label>
          <el-form-item class="marginTop" prop="phone">
            <el-input
              class="input-style"
              v-model="loginForm.phone"
              type="text"
              auto-complete="off"
              placeholder="请输入手机号"
            >
            </el-input>
          </el-form-item>
          <label class="register-label">短信验证码</label>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item class="marginTop" prop="dxcode">
                <el-input
                  v-model="loginForm.code"
                  type="text"
                  auto-complete="off"
                  placeholder="请输入短信验证码"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="marginTop" prop="tpcode">
                <el-button
                  type="text"
                  :disabled="codeTimeStyle"
                  @click="getCode()"
                  >{{ dxcodeName }}</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <label class="register-label">图片验证码</label>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item class="marginTop" prop="code">
                <el-input
                  v-model="loginForm.code"
                  type="text"
                  auto-complete="off"
                  placeholder="请输入验证码"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="marginTop">
                <el-button :disabled="codeTimeStyle" @click="getCode()">{{
                  dxcodeName
                }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-checkbox class="register-label">记住密码</el-checkbox>
        </el-tab-pane>
      </el-tabs>
      <el-button
        type="primary"
        style="width: 100%; margin-top: 2.6rem"
        @click="submitForm('registerForm')"
        >登 录</el-button
      >

      <div style="width: 84%; bottom: 1.5em; position: absolute">
        <label>已有账号？</label>
        <el-button
          type="text"
          class="to-register"
          style="flex: 1"
          @click="toRegister()"
          >立即注册</el-button
        >
        <el-button
          type="text"
          class="to-register"
          style="right: 0; position: absolute"
          @click="toRegister()"
          >忘记密码</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        userName: "",
        pwd: "",
        phone: "",
        dxcode: "",
        tpcode: "",
      },
      activeName: "first",
      dxcodeName: "获取验证码",
      codeTimeStyle: false,
      rules1: {
        userName: [{ required: true, message: "请输用户名", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      rules2: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误",
          },
        ],
        code: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
        txCode: [
          { required: true, message: "请输入图形证码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({ path: "/MianPage" });
        } else {
          return false;
        }
      });
    },
    toRegister() {
      this.$router.push({ path: "/Register" });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/common.scss";
.to-register {
  font-size: 62.5%;
}
.input-style /deep/ .el-input__inner {
  border: 0rem;
  border-radius: 0.2rem;
  background: #f7f7f7;
  padding: 0.7rem;
  color: #999999;
}
.register {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../assets/login-bg.png");
  background-size: cover;
  display: flex;
  justify-content: flex-end;
}

.el-form {
  padding: 2rem;
  width: 22rem;
  background: white;
  border-radius: 0.3em;
  margin: 4rem 7rem;
  height: 60%;
  position: relative;
}

.title {
  font-size: 3em;
  font-weight: bold;
  color: black;
}

.content {
  font-size: 16em;
  font-weight: bold;
  color: black;
}

.marginTop {
  margin-top: 0.2rem;
}

.register-label {
  font-weight: bold;
  color: #333333;
  font-size: 0.7rem;
}
.el-button--primary {
  color: #fff;
  background-color: $color-main;
  border-color: $color-main;
}
.el-button--primary:active {
  background: $color-blue-press;
}
</style>
